<template>
  <div class="classify">
    <!-- <search /> -->
    <div class="search">
      <input type="text" placeholder="回车搜索商品" @keydown.enter="search" v-model="searchText" />
    </div>
    <div class="main">
      <div class="left">
        <div
          v-for="(item, index) in types"
          :key="index"
          @click="typeClick(index)"
          :class="active === index ? 'act' : ''"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="right">
        <div class="top">
          <carousel height="120px" autoPlay delay="2000" />
        </div>
        <div class="bottom">
          <div v-for="item in showLists" :key="item.id">
            <img :src="item.icon" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import carousel from "@/components/Carousel"
  import { categoryAll } from "@/utils/api/index"
  export default {
    name: "classify",
    components: {
      carousel,
    },
    data() {
      return {
        lists: [],
        showLists: [],
        active: 0,
        types: [],
        searchText: "",
      }
    },
    created() {
      categoryAll().then((res) => {
        this.types = res.data.filter((item) => item.level === 1)
        this.types.unshift({
          name: "全部分类",
          type: "",
        })
        this.lists = res.data
        this.showLists = res.data
      })
    },
    methods: {
      typeClick(index) {
        this.active = index
        this.showLists = this.lists.filter((item) =>
          item.type.includes(this.types[this.active].type)
        )
        console.log(this.showLists)
      },
      search() {
        this.showLists = this.lists.filter((item) => item.name.includes(this.searchText))
      },
    },
  }
</script>

<style lang="scss" scoped>
  .classify {
    height: 100%;
  }
  .search {
    height: 0.8rem;
    display: flex;
    align-items: center;
    input {
      outline: none;
      border: none;
      background-color: #f5f5f5;
      width: 5.4rem;
      height: 0.5rem;
      border-radius: 1rem;
      margin-left: 0.3rem;
      padding-left: 0.2rem;
      box-sizing: border-box;
    }
  }
  .main {
    border-top: 0.02rem solid #f5f5f5;
    display: flex;
    height: calc(100% - 1.8rem);
    .left {
      flex-shrink: 0;
      flex-basis: 1.8rem;
      font-size: 0.28rem;
      border-right: 0.02rem solid #f5f5f5;
      height: 100%;
      div {
        text-align: center;
        line-height: 0.8rem;
        margin-top: 0.1rem;
        border-left: 0.06rem solid #fff;
        &.act {
          border-left: 0.06rem solid red;
          color: red;
        }
      }
    }
    .right {
      height: 100%;
      overflow-y: auto;
      flex-grow: 1;
      .top {
        height: 2.4rem;
        margin: 0.2rem 0.3rem;
      }
      .bottom {
        padding: 0 0.1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        div {
          font-size: 0.28rem;
          img {
            width: 1.6rem;
            height: 1.6rem;
            margin-bottom: 0.1rem;
          }
          p {
            text-align: center;
          }
        }
      }
    }
  }
</style>
